<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/scss.css">
</head>

<body>
    <div class="all">
        <!-- 导航栏 -->
        <div class="top">
            <ul>
                <li>中国大陆 <a></a> </li>
                <li>亲，请登录</li>
                <li>免费注册</li>
                <li>手机逛淘宝</li>
                <li>我的淘宝<a></a></li>
                <li> <i></i> 购物车<a></a></li>
                <li> <i></i> 收藏夹 <a></a></li>
                <li>商品分类</li>
                <li>免费开店</li>
                <li>
                    <p>|</p> 千牛卖家中心<a></a>
                </li>
                <li>联系客服<a></a></li>
                <li><i></i>网站导航<a></a></li>
            </ul>
        </div>
        <!-- 内容 -->
        <!-- 底色 -->
        <div class="content">
            <div class="box">
                <div class="title1">
                    <img class="img1" src="./imgs/20210628163230.png" alt="">
                    <!-- 输入框 -->
                    <p>宝贝 <a></a><input type="text" placeholder="扎染阔腿裤"> <i></i> <button>搜索</button> </p>
                    
                    <img class="img2" src="./imgs/20210628170525.png" alt="">
                    <ul>
                        <li>新款连衣裙</li>
                        <li>四件套</li>
                        <li>潮鞋T恤</li>
                        <li>时尚女鞋</li>
                        <li>短裤</li>
                        <li>半身裙</li>
                        <li>男士外套</li>
                        <li>墙纸</li>
                        <li>行车记录仪</li>
                        <li>新款男鞋</li>
                        <li>耳机</li>
                        <li>时尚女包</li>
                        <li>沙发</li>
                    </ul>
                </div>
                <!-- 菜单 -->
                <div class="title2">
                    <ul>
                        <li>主题市场</li>
                        <li>天猫</li>
                        <li>聚划算</li>
                        <li>天猫超市</li>
                        <li> | 司法拍卖</li>
                        <li>飞猪旅行</li>
                        <li>天天特卖</li>
                        <li>陶小铺 | </li>
                        <li>造点新货</li>
                        <li>苏宁易购</li>
                        <li>淘宝心选</li>
                        <li>智能生活</li>
                    </ul>
                </div>
                <div class="box2">

                    <div class="left">
                        左侧菜单
                        <ul>
                            <li>女装/内衣/家居<a>></a></li>
                            <li>女鞋/男鞋/箱包<a>></a></li>
                            <li>母婴/童鞋/玩具<a>></a></li>
                            <li>男装/户外运动<a>></a></li>
                            <li>美妆/彩妆/个护<a>></a></li>
                            <li>手机/数码/企业<a>></a></li>
                            <li>大家电/生活电器<a>></a></li>
                            <li>零食/生鲜/茶酒<a>></a></li>
                            <li>厨具/收纳/清洁<a>></a></li>
                            <li>家访/家饰/鲜花<a>></a></li>
                            <li>图书音像/文具<a>></a></li>
                            <li>医药保健/进口<a>></a></li>
                            <li>汽车/二手车/用品<a>></a></li>
                            <li>房产/装修家居/建材<a>></a></li>
                            <li>手表/眼睛/珠宝饰品<a>></a></li>
                        </ul>
                    </div>
                    <!-- 轮播图和首页图片· -->
                    <div class="middle">
                        <h1>
                            <img src="./imgs/O1CN015XjDj022QGIZiu7Bc_!!6000000007114-0-octopus.jpg" alt="">
                        </h1>
                        <h2>
                            <img src="./imgs/O1CN01Arkn9I1wLmjWSNfLA_!!6000000006292-0-octopus.jpg_290x290q90.jpg_.webp"
                                alt="">
                        </h2>
                        <div class="guodu">
                            <p>TMALL天猫<a>理想生活上天猫</a></p>
                            <h6><a>4</a>/5 今日热卖</h6>
                        </div>
                        <h3 class="h3"><img src="./imgs/a1.jpg" alt=""></h3>
                        <h3><img src="./imgs/a2.jpg" alt=""></h3>
                        <h5><img src="./imgs/a3.jpg" alt=""></h5>
                        
                    </div>
                    <!-- 轮播图右侧内容 -->
                    <div class="right">
                        <h1><img src="./imgs/TB1yeWeIFXXXXX5XFXXuAZJYXXX-210-210.png_50x50.jpg" alt=""></h1>
                        <h6>Hi! 你好</h6>

                        <div class="vip">
                            <p class="p1"><a></a> 淘宝金币抵钱</p>
                            <p class="p2"><a></a> 会员俱乐部</p>
                        </div>
                        <!-- 注册按钮模块 -->
                        <div class="registered">
                            <ul>
                                <li>登录</li>
                                <li>注册</li>
                                <li>开店</li>
                            </ul>
                        </div>
                        <p class="p3">
                            <img src="./imgs/fenxiang.png" alt="">
                        </p>
                        <div class="announcement">
                            <ul>
                                <li>公告</li>
                                <li>规则</li>
                                <li>安全</li>
                                <li>公益</li>
                                <li>千牛</li>
                            </ul>
                            <p>阿里公益“奥斯卡”</p>
                            <p>阿里公益论坛</p>
                            <h6><img src="./imgs/a4.png" alt=""></h6>
                        </div>
                    </div>
                </div>
                <!-- 有好货 -->
                <div class="box3">
                    <p class="p-1">有好货 <a>全民口碑</a> </p>
                    <ul>
                        <li>
                            <img src="./imgs/b1.png" alt="">
                            <p>Pure Cashmere保暖针织帽</p>
                            <a>这款针织帽风格休闲可爱, ...</a>
                        </li>
                        <li>
                            <img src="./imgs/b2.png" alt="">
                            <p>二胎家庭都在用这种床</p>
                            <a>柔软质量很好很高档,很喜...</a>
                        </li>
                        <li>
                            <img src="./imgs/b3.png" alt="">
                            <p>周大福简约蛇骨链</p>
                            <a>极致优雅,雅致大气人人皆...</a>
                        </li>
                        <li>
                            <img src="./imgs/b4.png" alt="">
                            <p>凯蒂猫的新手机功能真多</p>
                            <a>这款针织帽风格休闲可爱, ...</a>
                        </li>
                        <li>
                            <img src="./imgs/b5.png" alt="">
                            <p>便携战术防身扇，户外防身</p>
                            <a>钛扇的整体手感舒适，大扇...</a>
                        </li>
                    </ul>
                </div>
                <div class="box4">
                    <p><img src="./imgs/TB12EhzIXXXXXbMXpXXDgwcQVXX-375-130.jpg" alt=""></p>
                    <p><img src="./imgs/TB1ZeJGIXXXXXcnXXXXDgwcQVXX-375-130.jpg" alt=""></p>
                    <p><img src="./imgs/TB197VzIXXXXXbJXpXXDgwcQVXX-375-130.jpg" alt=""></p>
                </div>
            </div>
        </div>




    </div>
</body>

</html>